import React, { useCallback } from 'react'
import { View, Text } from '@tarojs/components'
import i18n from '@I18N'
import RecommendUserCard from '@COMPONENTS/User/RecommendUserCard'
import style from './DoctorCard.module.scss'

export default function DoctorCard({
  data = {}, language, onClick, highlight = [], containerClass = ''
}) {
  const {
    p8Id, InquiryEnabled, InquiryRate, PracticeInfoId, PhoneInquiryRate, PhoneInquiryEnabled
  } = data
  const onClickUser = useCallback(() => {
    onClick && onClick(p8Id || PracticeInfoId, data)
  }, [p8Id, PracticeInfoId, onClick, data])
  const showInquiry = InquiryEnabled || PhoneInquiryEnabled

  return (
    <View className={`${style.container} ${containerClass}`} onClick={onClickUser}>
      <RecommendUserCard
        data={data}
        language={language}
        onLineDesc
        showLabel
        highlight={highlight}
      />
      {showInquiry && (
        <View className={style.cardBottom}>
          <View className={style.inquiryRateView}>
            <InquiryRateCard isEnabled={InquiryEnabled} title={i18n.doctor.picture_text()} inquiryRate={InquiryRate} />
            <InquiryRateCard isEnabled={PhoneInquiryEnabled} title={i18n.doctor.phone_text()} inquiryRate={PhoneInquiryRate} />
          </View>
          <Text className={style.askBtn}>{i18n.doctor.go_consulting()}</Text>
        </View>
      )}
    </View>
  )
}

const InquiryRateCard = ({ title, inquiryRate, isEnabled }) => {
  if (!isEnabled) return null
  return (
    <Text className={style.consultingFees}>
      {`${title}:`}
      <Text className={style.fees}>{`¥${inquiryRate}`}</Text>
    </Text>
  )
}
